﻿
@{
    ViewBag.Title = "Kpi項目";
    ViewBag.PageInfo = "Kpi/KpiItem";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div style="text-align:center; margin-top:30px;">
    <div style="text-align: center; border: 4px solid #92d050; width: 80%; height: 550px; margin: auto; border-radius: 10px;">
        <table id="Table1" style="width: 100%; margin-top: 10px;">
            <tr style="height: 30px;">
                <td style="width: 10%; text-align: right;">域：</td>
                <td style="width: 10%; text-align: left;">
                    <input id="TxtItemSite" type="text" style="height:25px;width:240px;" value="@ViewBag.Contract" />
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1;">例：EMCHS</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">NO：</td>
                <td style="text-align: left;">
                    <input id="TxtItemNo" type="text" style="height:25px;width:240px;" />
                    <span id="ItemId" hidden="hidden"></span>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：1</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">編號：</td>
                <td style="text-align: left;">
                    <input id="TxtItemCode" type="text" style="height:25px;width:240px;" />
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：Sales01</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">流程：</td>
                <td style="text-align: left;">
                    <textarea id="TxtKpiDesc" rows="2" style="width: 80%; height: 50px; max-width: 555px;"></textarea>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：COP1行銷管理流程</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">績效指標：</td>
                <td style="text-align: left;">
                    <textarea id="TxtKpiTarget" rows="2" style="width: 80%; height: 50px; max-width: 555px;"></textarea>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：達成銷售額>預算</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">公式：</td>
                <td style="text-align: left;">
                    <textarea id="TxtKpiFunc" rows="2" style="width: 80%; height: 50px; max-width: 555px;"></textarea>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：實際銷售額/預算銷售額*100%</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">單位：</td>
                <td style="text-align: left;">
                    <select id="SelItemUom" aria-label="SelItemUom" style="height: 25px; width: 240px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Uom)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：%</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">數值形式：</td>
                <td style="text-align: left;">
                    <select id="SelItemVForm" aria-label="SelItemVForm" style="height: 25px; width: 240px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.VForm)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：百分比</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">數值趨勢：</td>
                <td style="text-align: left;">
                    <select id="SelItemTrend" aria-label="SelItemTrend" style="height: 25px; width: 240px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Trend)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：越大越好</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">符號：</td>
                <td style="text-align: left;">
                    <select id="SelItemOper" aria-label="SelItemOper" style="height: 25px; width: 240px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Oper)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_V1"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：=</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">衡量頻率：</td>
                <td style="text-align: left;">
                    <select id="SelItemFreq" aria-label="SelItemFreq" style="height: 25px; width: 240px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Freq)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：每月</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">輸入方式：</td>
                <td style="text-align: left;">
                    <select id="SelItemInput" aria-label="SelItemInput" style="height: 25px; width: 240px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Input)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：手動</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">年度：</td>
                <td style="text-align: left;">
                    <select id="SelItemYearly" aria-label="SelItemYearly" style="height: 25px; width: 240px;">
                        <option value=""></option>
                        @{
                            foreach (System.Data.DataRow item in ViewBag.Yearly)
                            {
                                <option value="@item["CONF_ID"].ToString()">@item["CONF_NM"].ToString()</option>
                            }
                        }
                    </select>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：平均</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">流程負責人：</td>
                <td style="text-align: left;">
                    <input id="TxtItemOwner" type="text" style="height:25px;width:240px;" placeholder="請輸入工號" onchange="ownerChange(event)" />
                    &nbsp;
                    <span id="OwnerName"></span>
                    <span id="OwnerId" hidden="hidden"></span>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：陶俊</td>
            </tr>
            <tr style="height:30px;">
                <td style="width: 10%; text-align: right;">流程維護人：</td>
                <td style="text-align: left;">
                    <input id="TxtItemM" type="text" style="height:25px;width:240px;" placeholder="請輸入工號" onchange="ownerChange(event)" />
                    &nbsp;
                    <span id="MName"></span>
                    <span id="MId" hidden="hidden"></span>
                </td>
                <td style="width: 10%; text-align: left; color: #507cd1; ">例：俞施霖</td>
            </tr>
        </table>
    </div>
    <div style="text-align: center; margin-top: 30px;">
        <input id="BtnConfirmItem" type="button" value="確&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;定" style="width: 100px; height: 25px;" onclick="btnItemAddConfirmClick()" />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input id="BtnCancelItem" type="button" value="返&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回" style="width: 100px; height: 25px;" onclick="btnItemAddCancelClick()" />
    </div>
</div>

<script>
    function btnItemAddConfirmClick() {
        var site = $("#TxtItemSite").val();
        var no = $("#TxtItemNo").val();
        var code = $("#TxtItemCode").val();
        var desc = $("#TxtKpiDesc").val();
        var target = $("#TxtKpiTarget").val();
        var func = $("#TxtKpiFunc").val();
        var uom = $("#SelItemUom").val();
        var vform = $("#SelItemVForm").val();
        var trend = $("#SelItemTrend").val();
        var oper = $("#SelItemOper").val();
        var freq = $("#SelItemFreq").val();
        var input = $("#SelItemInput").val();
        var yearly = $("#SelItemYearly").val();
        var owner = $("#TxtItemOwner").val();
        var maintainer = $("#TxtItemM").val();
        if (site == null || site == "" || no == null || no == "" || code == null || code == "" || desc == null || desc == "" || target == null || target == "" ||
            func == null || func == "" || uom == null || uom == "" || vform == null || vform == "" || trend == null || trend == "" || oper == null || oper == "" ||
            freq == null || freq == "" || input == null || input == "" || yearly == null || yearly == "" || owner == null || owner == "" || maintainer == null || maintainer == "") {
            alert("請完整輸入數據！");
            return;
        }
        uom += "§" + $("#SelItemUom")[0].selectedOptions[0].text;
        vform += "§" + $("#SelItemVForm")[0].selectedOptions[0].text;
        trend += "§" + $("#SelItemTrend")[0].selectedOptions[0].text;
        oper += "§" + $("#SelItemOper")[0].selectedOptions[0].text;
        freq += "§" + $("#SelItemFreq")[0].selectedOptions[0].text;
        input += "§" + $("#SelItemInput")[0].selectedOptions[0].text;
        yearly += "§" + $("#SelItemYearly")[0].selectedOptions[0].text;
        owner = $("#OwnerId")[0].innerHTML + "§" + $("#OwnerName")[0].innerHTML.split('-')[1];
        maintainer = $("#MId")[0].innerHTML + "§" + $("#MName")[0].innerHTML.split('-')[1];

        var data_info = [];
        data_info.push(code);
        data_info.push(site);
        data_info.push(no);
        data_info.push(desc);
        data_info.push(target);
        data_info.push(func);
        data_info.push(owner);
        data_info.push(freq);
        data_info.push(vform);
        data_info.push(trend);
        data_info.push(input);
        data_info.push(uom);
        data_info.push(yearly);
        data_info.push(oper);
        data_info.push(maintainer);

        var flag = "@ViewBag.UpdateFlag";
        var url = "/Kpi/AddItemData";
        var item_id;
        if (flag == "Y") {
            url = "/Kpi/UpdateItemData";
            item_id = $("#ItemId")[0].innerHTML;
        }

        showLoading();
        $.ajax({
            type: "get",
            url: url,
            data: {
                data_info: data_info.join('⊕'),
                item_id: item_id
            },
            success: function (data) {
                hideLoading();
                var result = JSON.parse(data);
                if (result.flag) {
                    alert(result.msg);
                    window.location.href = "/Kpi/KpiItem";
                } else {
                    alert(result.msg);
                }
            },
            error: function (err) {
                hideLoading();
            }
        });
    }
    function btnItemAddCancelClick() {
        window.location.href = "/Kpi/KpiItem";
    }
    function ownerChange(event) {
        var owner = event.target.value;
        if (owner != null && owner != "") {
            showLoading();
            $.ajax({
                type: "get",
                url: "/Kpi/GetOwnerName",
                data: {
                    owner: owner
                },
                success: function (data) {
                    var result = JSON.parse(data);
                    if (result.flag) {
                        if (event.target.id == "TxtItemOwner") {
                            $("#OwnerName")[0].innerHTML = result.uname;
                            $("#OwnerId")[0].innerHTML = result.uid;
                        } else {
                            $("#MName")[0].innerHTML = result.uname;
                            $("#MId")[0].innerHTML = result.uid;
                        }
                    } else {
                        alert(result.msg);
                        if (event.target.id == "TxtItemOwner") {
                            $("#TxtItemOwner").val("");
                            $("#OwnerName")[0].innerHTML = "";
                            $("#OwnerId")[0].innerHTML = "";
                        } else {
                            $("#TxtItemM").val("");
                            $("#MName")[0].innerHTML = "";
                            $("#MId")[0].innerHTML = "";
                        }
                    }
                    hideLoading();
                },
                error: function (err) {
                    hideLoading();
                }
            });
        }
    }
    $(function () {
        var flag = "@ViewBag.UpdateFlag";
        if (flag == "Y") {
            var data_info = "@ViewBag.Update".split('&#167;');
            $("#ItemId")[0].innerHTML = data_info[0];
            $("#TxtItemCode").val(data_info[1]);
            $("#TxtItemSite").val(data_info[2]);
            $("#TxtItemNo").val(data_info[3]);
            $("#TxtKpiDesc").val(data_info[4]);
            $("#TxtKpiTarget").val(data_info[5]);
            $("#TxtKpiFunc").val(data_info[6]);
            $("#TxtItemOwner").val(data_info[16]);
            $("#SelItemFreq").val(data_info[8]);
            $("#SelItemVForm").val(data_info[9]);
            $("#SelItemTrend").val(data_info[10]);
            $("#SelItemInput").val(data_info[11]);
            $("#SelItemUom").val(data_info[12]);
            $("#SelItemYearly").val(data_info[13]);
            $("#SelItemOper").val(data_info[14]);
            $("#OwnerName")[0].innerHTML = data_info[15] + "-" + data_info[17];
            $("#OwnerId")[0].innerHTML = data_info[7];
            $("#TxtItemM").val(data_info[20]);
            $("#MName")[0].innerHTML = data_info[19] + "-" + data_info[21];
            $("#MId")[0].innerHTML = data_info[18];
        }
    });
</script>